@value unit: 8px;
@value text-color: #444;
@value line-color: #DFE5EB;
@value link-color: #1866C5;
@value link-hover-color: #FF5A00;
@value error-color: #C10000;
@value gray-color: #BBB; /* disabled text & hints */
@value dark-gray-color: #999; /* headers & actions */
@value green-color: #4DA400;
@value blue-color: #25B7FF;
@value light-blue-color #E9F8FF;
@value pale-blue-color #A6D5ED;
@value pink-color: #BC00DE;
@value border-color: rgba(0, 0, 0, 0.2);
@value outline-color: rgba(37, 183, 255, 0.5);
@value sidebar-background-color: #F7F9FA;
@value border-radius: 3px;
@value border-radius-small: 2px;
@value font-size: 13px;
@value font-size-smaller: 11px;
@value line-height: 20px;
@value ease: 0.15s ease-out;

.clearfix {
  &::after {
    display: block;
    clear: both;

    content: '';
  }
}

.font {
  color: text-color;

  font-family: system-ui, Arial, sans-serif;
}

/* To be used at large sizes */
/* As close as possible to Helvetica Neue Thin (to replace Gotham) */
.thin-font {
  font-family: "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: font-size;
  font-weight: 100;  /* Renders Helvetica Neue UltraLight on OS X, but otherwise it would be just Light */
}

.monospace-font {
  font: 12px Menlo, "Bitstream Vera Sans Mono", "Ubuntu Mono", "Courier New", Courier, monospace;
}

.input-disabled {
  border-color: #dedede;
  background-color: #f8f8f8;
}

.ellipsis {
  overflow: hidden;

  white-space: nowrap;
  text-overflow: ellipsis;
}

/* Common z-index-values */

/* Invisible element is an absolutely positioned element which should be below */
/* all other elements on the page */
@value invisible-element-z-index: -1;

/* z-index for position: fixed elements */
@value fixed-z-index: 1;

/* Elements that should overlay all other elements on the page */
@value overlay-z-index: 5;

/* Alerts should de displayed above overlays */
@value alert-z-index: 6;

/* Note: footer also has top margin which isn't taken into account here */
@value footer-height: calc(unit*8);

/* Media breakpoints (minimal values) */
@value breakpoint-small: 640px;
@value breakpoint-middle: 960px;
@value breakpoint-large: 1200px;

/* Media queries */
@value extra-small-screen-media: (max-width: calc(breakpoint-small - 1));
@value small-screen-media: (min-width: breakpoint-small) and (max-width: calc(breakpoint-middle - 1));
@value middle-screen-media: (min-width: breakpoint-middle) and (max-width: calc(breakpoint-large - 1));
@value large-screen-media: (min-width: breakpoint-large);
